<template>
    <el-dialog class="my-dialog" :style="{ maxHeight: height }" v-model="vModelValue" :width="type" :top="top" :destroy-on-close="destroyOnClose" :close-on-press-escape="closeOnPressEscape" :close-on-click-modal="closeOnClickModal" :draggable="draggable" @close="onClose" v-bind="$attrs">
        <template #default>
            <slot name="default"></slot>
        </template>

        <template #footer v-if="hasFooter">
            <slot name="footer"></slot>
            <el-button @click="onClose">{{ closeText }}</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { DialogType } from "@/_gx/TsEnums";

const props = defineProps({
    //调用时，传过来的v-model对应的接收的属性
    modelValue: {
        type: Boolean,
        default: false,
    },

    height: {
        type: String,
        default: "calc(100% - 120px)",
    },
    type: {
        type: String as PropType<DialogType>,
        default: DialogType.C1,
    },

    //是否显示底部
    hasFooter: {
        type: Boolean,
        default: true,
    },

    //关闭时是否销毁其内部元素，注意，只会销毁内部元素，并不会销毁dialog本身
    destroyOnClose: {
        type: Boolean,
        default: true,
    },

    //按esc是否关闭对话框
    closeOnPressEscape: {
        type: Boolean,
        default: true,
    },

    //单击模态窗口是否关闭对话框
    closeOnClickModal: {
        type: Boolean,
        default: false,
    },

    //默认距离顶部高度
    top: {
        type: String,
        default: "3%",
    },

    //关闭按钮文字
    closeText: {
        type: String,
        default: "关闭",
    },

    //是否可以拖动
    draggable: {
        type: Boolean,
        default: true,
    },
});

//页面挂载完成时
onMounted(() => {
    vModelValue.value = props.modelValue;
});

//监听属性
watch(
    () => props.modelValue,
    (newVal, oldVal) => {
        vModelValue.value = props.modelValue;
    }
);

const vModelValue = ref(false);

//关闭事件
const onClose = () => {
    emits("close");
};

const emits = defineEmits(["close"]);
</script>
